<template>
  <el-dialog
    v-model="showForm"
    title="备注订单"
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form
      ref="logisticsFormRef"
      :model="logisticsForm"
      :rules="logisticsFormRule"
    >
      <el-form-item
        label="备注"
        prop="remark"
      >
        <el-input
          v-model="logisticsForm.remark"
          :rows="3"
          maxlength="200"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleLogisticsInfoClose">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm(logisticsFormRef)"
        >确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { IOrderPageRow, IOrderDetail } from "@/api/modules/pointsMall";
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { setRemarkOrder } from "@/api/pointsMall";

const props = defineProps<{
  show: boolean;
  orderData: IOrderPageRow | IOrderDetail | undefined
}>()

const emits = defineEmits([ 'update:show', 'refresh' ])
const Route = useRoute();
const orderData: any = toRef(props, 'orderData')
const show = toRef(props, 'show')
const name = ref('')
const logisticsFormRef = ref<FormInstance>()
const logisticsFormRule = reactive<FormRules>({
  remark: [ {
    required: true,
    message: '备注是必填项',
    trigger: 'blur',
  } ],
})

const logisticsForm = reactive({
  remark: '',
  orderId: Route.query.id,
  businessType: 'mall',
})

const showForm = computed({
  get() {
    return props.show
  },
  set() {
    emits('update:show', false)
  }
})

watch(showForm, () => {
  /* ... */
  if (showForm.value){
    logisticsForm.remark = orderData.value.ext.remark
  }
})

const handleLogisticsInfoClose: () => void = () => {
  showForm.value = false
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      handleLogisticsInfoConfirm()
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleLogisticsInfoConfirm: () => void = async() => {
  let rs: any = await setRemarkOrder(logisticsForm)
  if (rs.code === 200) {
    ElMessage.success("备注更新成功");
    handleLogisticsInfoClose()
    clearForm()
    refresh()
  }
  
}

const refresh = () => {
  emits('refresh')
}

const clearForm = () => {
  logisticsForm.remark = ''
}


</script>

<style scoped lang="scss">
</style>